@extends('admin.common.main')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />
<style>
#img{
    width:200px;
    height:100px;
    display: none;
}
</style>
@endsection
@section('cnt')
<div class="x-body page-container">
    @include('admin.common.validate')
    @include('admin.common.msg')
    
    <a class="layui-btn" href="{{ route('admin.article.index') }}">返回</a>
    <form  method="post" action="{{ route('admin.article.store') }}">
         {{ csrf_field() }}
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章标题
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="title" name="title" 
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章描述
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="desn" name="desn" 
                  autocomplete="off" class="layui-input">
              </div>
          </div>
           <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章封面
              </label>
              <div class="layui-input-inline">
                  {{-- <input type="file" id="pic" name="pic" 
                  autocomplete="off" class="layui-input"> --}}
                  {{-- 表单提交的时候的路径的地址 --}}
                  <input type="hidden" name="pic" id="pic" value="{{ config('up.pic') }}">
                  <div id="picker">上传文章封面</div>
                  <div id="imgdiv">
                      <img src="" id="img">
                  </div>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>文章内容
              </label>
              <textarea name="body" id="body" cols="30" rows="10"></textarea>
          </div>
         
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" type="submit">
                  添加文章
              </button>
          </div>
      </form>
</div>
@endsection
@section('js')
<script src="/js/vue.js"></script>
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>
<script src="/webuploader/webuploader.js"></script>
<script>
    
    //百度编辑器初始化
    var ue = UE.getEditor('body',{
        initialFrameHeight:450,
        initialFrameWidth:1300
    });
    
    
    //初始化webuploader
    //
    var uploader = WebUploader.create({
        //选完之后，是否自动上传
        auto:true,
        //swf文件路径
        swf:'/webuploader/Uploader.swf',
        //文件接收服务端,上传的php代码
        server:'{{ route('admin.article.upfile') }}',
        //选择文件的按钮
        pick:{
            id:"#picker",
            //是否开启选择多个文件的能力
            multiple:false
        },
        //文件上传携带的参数
        formData:{
            _token:'{{ csrf_token() }}'
        },
        //文件上传的表单名称【默认是file】
        fileVal:'file',
        //压缩image,默认如果是jpeg，文件上传前会进行压缩再上传
        resize:true
    });

    //文件上传之后的回调 【这是插件内置方法】
    uploader.on('uploadSuccess',function(file,ret){
        //图片的路径
        let src = ret.url;
        //给表单添加value变量
        $("#pic").val(src);
        //给图片添加src
        $("#img").attr('src',src);
        $("#img").css('display','block');
    });
</script>
@endsection